<template>
    <div class="my-list">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
            <!-- 收藏 -->
            <!-- <div v-if="active === 0">
                <van-cell
                    v-for="(item, index) in collectList"
                    :key="index"
                    class="list-wrap"
                >
                    <list-item :article="item" />
                </van-cell>
            </div> -->

            <!-- 历史 -->
            <!-- <div v-else>
                <van-cell
                    v-for="(item, index) in historyList"
                    :key="index"
                    class="list-wrap"
                >
                    <list-item :article="item" />
                </van-cell>
            </div> -->
            <van-cell
                v-for="(item, index) in value"
                :key="index"
                class="list-wrap"
            >
                <list-item :article="item" />
            </van-cell>
        </van-list>
    </div>
</template>

<script>
// import { getUserCollect, getUserHistory } from '@/api/user'
import ListItem from '@/components/list-item'

export default {
    name: 'MyList',
    components: {
        ListItem
    },
    props: {
        // active: {
        //     type: Number,
        //     required: true
        // },
        fn: {
            type: Function,
            required: true
        },
        value: {
            type: Array,
            default: () => []
        }
    },
    data () {
        return {
            // // 收藏列表
            // collectList: [],
            // // 历史列表
            // historyList: [],
            // list: this.getList()
            loading: false,
            finished: false,
            page: 1,
            perPage: 20
        }
    },
    created () { },
    mounted () { },
    methods: {
        async onLoad () {
            // let results = null
            // if (!this.active) {
            //     const { data: res } = await getUserCollect({
            //         page: this.page,
            //         per_page: this.perPage
            //     })
            //     // console.log(res)
            //     // const { results } = res.data
            //     results = res.data.results
            //     this.collectList.push(...results)
            //     // console.log(this.collectList)
            // } else {
            //     const { data: res } = await getUserHistory({
            //         page: this.page,
            //         per_page: this.perPage
            //     })
            //     // const { results } = res.data
            //     this.historyList.push(...results)
            //     results = res.data.results
            //     console.log(res.data)
            // }
            const { data: res } = await this.fn({
                page: this.page,
                per_page: this.perPage
            })
            const { results } = res.data
            this.value.push(...results)

            // 加载状态结束
            this.loading = false

            if (results.length) {
                this.page++
            } else {
                this.finished = true
            }
        }
        // getList () {
        //     return this.active === 0 ? this.collectList : this.historyList
        // }
    },
    computed: {},
    watch: {}
}
</script>

<style scoped>
.my-list {
    position: fixed;
    left: 0;
    right: 0;
    top: 90px;
    bottom: 0;
    overflow-y: auto;
}
.list-wrap {
    margin-bottom: 5px;
}
</style>
